Flexbox Cheat Sheet

1. Display: Flex & Flex-Wrap

Kontejner ispod koristi display: flex i flex-wrap: wrap. Smanji prozor preglednika da vidiš kako elementi skaču u novi red.

1
2
3
4
5

2. Flex-Grow

Srednji element (zeleni) ima flex-grow: 2, dok ostali imaju 1. On zauzima duplo više preostalog prostora.

1
Grow: 2
1

3. Flex-Shrink

Srednji element ima flex-shrink: 0 (neće se smanjiti ispod zadane širine), dok se ostali skupljaju.

Shrink: 1
Shrink: 0 (Fixed)
Shrink: 1

4. Flex-Basis

Ovo svojstvo određuje početnu veličinu elementa prije nego što se primijeni grow ili shrink.

Basis: 100px
Basis: 200px